<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvas {
            display: block;
            margin: 200px auto;
            border: 1px solid #000;
            box-shadow: 3px 3px #ccc;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>

    <!-- 
    获取绘图上下文 canvas
    获取画布节点
    ctx代表一个二维渲染上下文
    设置画布宽度也可以用: canvas.width = 600
    设置画布高度也可以用: canvas.height = 700
    ctx.moveTo(x, y) 移动到起始点
    ctx.lineTo(x, y) 创建直线路径
    -->

    <script>
        const canvas = document.getElementById("canvas");
        canvas.width = 600
        canvas.height = 700
        const ctx = canvas.getContext("2d");
        ctx.strokeStyle = "red"; // 设置线条颜色
        ctx.lineWidth = 5; // 设置线条宽度为5像素

        ctx.beginPath(); //开始新路径
        ctx.moveTo(150, 300);
        ctx.lineTo(450, 300);
        ctx.stroke();
        ctx.closePath(); //关闭路径
    </script>
</body>

</html>